<template>
  <div class="title">
    <Category title="美食分类">
      <h2 slot="ul">123</h2>
      <img src="" slot="img" alt="11223" />
    </Category>
    <Category title="游戏分类">
      <template v-slot:ul>
        <ul slot="ul">
          <li v-for="(item, index) in games" :key="index">{{ item }}</li>
        </ul>
      </template>
    </Category>
    <Category title="电影分类">
      <h2 slot="ul">456</h2>
    </Category>
  </div>
</template>

<script>
import Category from './components/Category'

export default {
  name: 'App',
  components: { Category },
  data() {
    return {
      foods: ['酱香猪蹄', '火锅', '烤肉', '小龙虾'],
      games: ['穿越火线', '劲舞团', '超级玛莉亚', '英雄联盟'],
      films: ['<教父>', '<肖生客的救赎>', '<拆弹专家>']
    }
  }
}
</script>

<style scoped>
.title {
  margin: 0 auto;
  display: flex;
}
</style>

